<script setup>
import TodoAdd from '@/components/TodoAdd.vue'
import TodoList from '@/components/TodoList.vue'
import TodoFilter from '@/components/TodoFilter.vue';
import { useTodoStore } from '@/store';
import { ref } from 'vue';
import { storeToRefs } from 'pinia'
import { useFilteredTodos } from '@/composables/useFilteredTodos.js'

const store = useTodoStore()
const { todos } = storeToRefs(store)
const { addTodo } = store
const { filter, filteredTodos } = useFilteredTodos(todos)

const todoContent = ref('')
const handleAddTodo = (content) => {
  addTodo(content)
  todoContent.value = ''
}

</script>

<template>
  <main>
    <div class="container">
      <h1>欢迎使用待办事项</h1>
      <TodoAdd v-model="todoContent" @add="handleAddTodo" />
      <TodoFilter :selected="filter" @change-filter="filter = $event" />
      <TodoList :todos="filteredTodos" />
    </div>
  </main>
</template>

<style lang="scss" scoped></style>
